<template>
  <div class="container">
    <a-space direction="vertical" style="width: 100%" :size="16">
      <a-card style="width: 100%" title="活动管理">
        <a-form :model="formState">
          <a-row :gutter="24">
            <a-col :span="6">
              <a-form-item label="活动名称">
                <a-input
                  style="width: 100%"
                  v-model:value="formState.name"
                  placeholder="输入活动名称"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="活动编号">
                <a-input
                  style="width: 100%"
                  v-model:value="formState.activityCode"
                  placeholder="输入活动编号"
                />
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="活动角色">
                <a-select
                  ref="select"
                  v-model:value="formState.role"
                  style="width: 100%"
                  placeholder="活动角色"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option :value="1">自营商户</a-select-option>
                  <a-select-option :value="2">企业商户</a-select-option>
                  <a-select-option :value="3">个体用户</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="推送状态">
                <a-select
                  ref="select"
                  v-model:value="formState.isPush"
                  style="width: 100%"
                  placeholder="活动角色"
                >
                  <a-select-option :value="null">全部</a-select-option>
                  <a-select-option :value="1">已推送</a-select-option>
                  <a-select-option :value="0">未推送</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item label="活动状态">
                <a-select
                  ref="select"
                  v-model:value="formState.activityState"
                  style="width: 100%"
                  placeholder="活动角色"
                >
                  <a-select-option :value="0">全部</a-select-option>
                  <a-select-option :value="1">未开始</a-select-option>
                  <a-select-option :value="2">进行中</a-select-option>
                  <a-select-option :value="3">已结束</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>

        <div class="layout-flexSpace">
          <a-space wrap>
            <a-button type="primary" @click="handleSearch">查询</a-button>
            <a-button @click="handleReset">重置</a-button>
          </a-space>
          <a-space wrap>
            <a-button type="primary" @click="handleExport">新建</a-button>
            <a-button type="primary" @click="handleExport">导出</a-button>
          </a-space>
        </div>
      </a-card>

      <a-card>
        <a-table
          :dataSource="dataSource"
          :columns="activeColumns"
          :pagination="pagination"
          @change="handleChangeSize"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'role'">
              {{
                record.role === 0
                  ? "全部"
                  : record.role === 1
                  ? "自营商户"
                  : record.role === 2
                  ? "企业商户"
                  : "个体用户"
              }}
            </template>
            <template v-else-if="column.key === 'activityState'">
              {{
                record.activityState === 1
                  ? "未开始"
                  : record.activityState === 2
                  ? "进行中"
                  : "已结束"
              }}
            </template>
            <template v-else-if="column.key === 'isPush'">
              {{ record.isPush === 0 ? "未推送" : "已推送" }}
            </template>
            <template v-else-if="column.key === 'isPush'">
              {{ record.isPush === 1 ? "已推送" : "未推送" }}
            </template>
            <template v-else-if="column.key === 'startTime'">
              <template v-if="record.isPermanent === 1"> 永久 </template>
              <template v-else
                >{{ record.startTime }} ~ {{ record.endTime }}</template
              >
            </template>
            <template v-else-if="column.key === 'action'">
              <a-space>
                <a-button @click="handleEdit(record)">查看</a-button>
                <a-button
                  v-if="record.activityState !== 3"
                  type="primary"
                  @click="handleEdit(record)"
                  >编辑</a-button
                >
                <a-button
                  v-if="record.isPush === 0"
                  type="primary"
                  @click="handleEdit(record)"
                  >推送</a-button
                >
                <a-button
                  v-if="record.activityState === 2 && record.isPush === 0"
                  type="primary"
                  @click="handleEdit(record)"
                  >结束</a-button
                >
                <a-button type="primary" danger @click="handleEdit(record)"
                  >删除</a-button
                >
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-space>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { activeColumns } from "./columns.js";
import { listMarket, exportMarket } from "@/api/market";
import { exporeFile } from "@/utils/exporeFile";
const pagination = ref({
  current: 1,
  pageSize: 10,
  defaultPageSize: 10,
  total: 0,
  showSizeChanger: true,
  showTotal: (total) => `共 ${total} 条`,
});
const formState = ref({
  page: pagination.value.current,
  pageSize: pagination.value.pageSize,
  activityCode: undefined,
  activityState: undefined,
  isPush: undefined,
  name: undefined,
  role: undefined,
});
const dataSource = ref([]);
//  获取活动列表
const getistMarket = async () => {
  const res = await listMarket(formState.value);
  if (res.code === 200) {
    dataSource.value = res.data.list;
    pagination.value.total = res.data.total;
  }
};
function handleSearch() {
  formState.value.page = 1;
  formState.value.pageSize = 10;
  getistMarket();
}
function handleReset() {
  formState.value = {
    page: 1,
    pageSize: 10,
    activityCode: undefined,
    activityState: undefined,
    isPush: undefined,
    name: undefined,
    role: undefined,
  };
  pagination.value.current = 1
  pagination.value.pageSize = 10
  getistMarket();
}

const handleExport = async () => {
  const data = await exportMarket(formState.value);
  exporeFile("活动列表.xls", data);
};
function handleChangeSize(page) {
  formState.value.page = page.current;
  formState.value.pageSize = page.pageSize;
  pagination.value.current = page.current;
  pagination.value.pageSize = page.pageSize;
  getistMarket();
}
onMounted(() => {
  getistMarket();
});
</script>

<style lang="less">
.img-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  .img-label {
    margin-top: 6px;
    color: #9599a5;
    font-size: 12px;
  }
}
</style>
